<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.siteName" clearable style="width: 160px;" placeholder="输入站点名字" />
      <el-input v-model="listQuery.siteFunctionary" clearable style="width: 160px;" placeholder="输入站点负责人" />
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">查找
      </el-button>
      <el-button type="primary" icon="el-icon-add" @click="handleCreate">添加
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
      highlight-current-row>

      <el-table-column align="center" width="160" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button type="warning" size="mini" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" width="180" label="ID" prop="id" />

      <el-table-column align="center" label="名称" prop="siteName" />

      <el-table-column align="center" width="120" label="经纬度" prop="sitePoint" />

      <el-table-column align="center" label="负责人" prop="siteFunctionary" />

      <el-table-column align="center" width="120" label="联系电话" prop="sitePhone" />

      <el-table-column align="center" width="120" label="行政区域" prop="siteArea" />

      <el-table-column align="center" width="180" label="创建时间">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime}}</div>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
      @pagination="getList" />

    <el-dialog :visible.sync="show" title="站点信息" :modal="false">
      <el-form ref="dataForm" :rules="rules" :model="site" label-position="left" label-width="100px">
        <el-form-item label="名称" prop="siteName">
          <el-input v-model="site.siteName" />
        </el-form-item>
        <el-form-item label="经纬度" prop="sitePoint">
          <el-input v-model="site.sitePoint" />
        </el-form-item>
        <el-form-item label="负责人" prop="siteFunctionary">
          <el-input v-model="site.siteFunctionary" />
        </el-form-item>
        <el-form-item label="联系电话" prop="sitePhone">
          <el-input type="number" v-model="site.sitePhone" />
        </el-form-item>
        <el-form-item label="行政区域" prop="siteArea">
          <el-input v-model="site.siteArea" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="!site.id" type="primary" @click="handleEdit">添加站点</el-button>
          <el-button v-if="site.id" type="primary" @click="handleEdit">修改站点</el-button>
          <el-button @click="closeViewer">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listSite,
    addSite,
    updateSite,
    deleteSite
  } from '@/api/site'
  import Pagination from '@/components/Pagination'
  import {
    parseTime
  } from '@/utils'

  export default {
    name: 'scrollList',
    components: {
      Pagination
    },
    data() {
      return {
        list: undefined,
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          siteName: '',
          siteFunctionary: ''
        },
        show: false,
        update: false,
        site: {
          id: '',
          siteName: '',
          sitePoint: '',
          siteFunctionary: '',
          sitePhone: '',
          siteArea: ''
        },
        rules: {
          siteName: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }],
          sitePoint: [{
            required: true,
            message: '经纬度不能为空',
            trigger: 'blur'
          }],
          siteFunctionary: [{
            required: true,
            message: '负责人不能为空',
            trigger: 'blur'
          }],
          sitePhone: [{
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur'
          }],
          siteArea: [{
            required: true,
            message: '行政区域不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
    },
    filters: {
      parseTime
    },
    methods: {
      getList() {
        this.listLoading = true
        listSite(this.listQuery).then(res => {
          this.list = res.data.selectSiteInfoByCondition
          this.total = res.data.allCount
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleCreate() {
        // this.$router.push({
        //   path: '/goods/upsert'
        // })
        this.showViewer()
      },
      handleUpdate(row) {
        this.update = true
        this.site.id = row.id
        this.site.siteName = row.siteName
        this.site.sitePoint = row.sitePoint
        this.site.siteFunctionary = row.siteFunctionary
        this.site.siteFunctionary = row.siteFunctionary
        this.site.sitePhone = row.sitePhone
        this.site.siteArea = row.siteArea
        this.showViewer(row)
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return Promise.resolve(deleteSite({
            id: row.id,
            siteStatus: 2
          })).then(() => {
            let msg = '删除成功'
            this.$message.success(msg)
            this.list.splice(this.list.findIndex(item => item.id === row.id), 1)
          }).catch(() => {})
        }).catch(() => {
          console.log("cancel")
        })
      },
      handleEdit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            if (this.update) {
              updateSite(this.site).then(res => {
                let msg = '修改成功'
                console.log(res)
                this.$message.success(msg)
                this.closeViewer()
                this.handleFilter()
              }).catch(() => {
                this.closeViewer()
              })
            } else {
              addSite(this.site).then(res => {
                let msg = '添加成功'
                this.$message.success(msg)
                this.closeViewer()
                this.handleFilter()
              }).catch(() => {
                this.closeViewer()
              })
            }
          }
        })
      },
      showViewer(e) {
        this.show = true
      },
      closeViewer(e) {
        this.show = false
        this.update = false
        this.site.id = ''
        this.site.siteName = ''
        this.site.sitePoint = ''
        this.site.siteFunctionary = ''
        this.site.siteFunctionary = ''
        this.site.sitePhone = ''
        this.site.siteArea = ''
      },
    }
  }
</script>
<style lang="less" scoped>
</style>
